<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员表单申请</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width:970px;
            border: 1px solid #CCCCCC;
            margin: 0 auto;
        }
        .top{
            margin-left: 30px;
            width: 912px;
            height: 81px;
            border-bottom: 1px dashed  #CCCCCC;
            line-height: 81px;
            margin-bottom: 10px;
        }
        .top span{
            font-size: 12px;
            color: #A9A9A9;
            margin-left: 10px;
        }
        .foo{
            width: 122px;
            height: 50px;
            text-align: right;
        }
        .floor input{
            width: 420px;
            height: 37px;
            margin-left: 20px;
            padding-left: 10px;
            color: #A9B1B1;
        }
        .floor1 .floor2{
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-image:url("img/1.gif");
            background-repeat:no-repeat;
            display:inline-block;
        }
        .floor1{
            width: 353px;
            height:50px;
            padding-left: 20px;
        }

        .floor3{
            display: inline-block;
            padding-top: 2px;
        }
        .floor5{
            display: inline-block;
        }
        .floor6 select{
            width: 433px;
            height: 38px;
            margin-left: 20px;
        }
        .floor7{
            padding-left:30px;
        }
        .floor8{
            width: 199px;
            height: 40px;
            margin-left: 20px;
        }
        .floor9{
            width: 199px;
            height: 40px;
            margin-left: 30px;
        }
        .main .main1{
            width: 314px;
            height: 37px;
            margin-left: 20px;
        }
        .main2{
          margin-left: 10px;
        }
        .main3 .main6{
            width: 100px;
            height: 37px;
            margin-left: 20px;
            padding-left: 10px;
        }
        .main3 .main4{
            width: 160px;
            height: 37px;
            padding-left: 10px;
        }
        .main3 .main5{
            width:102px;
            height: 37px;
            padding-left: 10px;
        }
        .main3 input{
            margin:4px;
            color: #A9A9A9;
        }
        .main7 textarea{
            width: 421px;
            height: 80px;
            margin-left: 20px;
            color: #A9A9A9;
            padding-left: 10px;
            padding-top: 10px;
        }
        .floor1 div{
            display: none;
        }
        .foot2{
            width: 13px;
            height: 13px;
            margin-left: 20px;
        }
        .foot3{
            font-size: 14px;
            padding: 5px;
        }
        .foot3 a{
            text-decoration: none;
            color:  #ff7654;
        }
        .te{
            background-color:#5f92c7;
            border-radius: 3px;
        }
        .te a {
            text-decoration: none;
            color: white;
            text-align: center;
        }
        .ti{
            width:450px;
            height:45px;
            line-height: 45px;
            text-align: center;
        }




    </style>
</head>
<body>
        <script>
            function foo() {
                if (document.getElementById('btn').value=='请输入与公司营业执照一致的公司名称'){
                    document.getElementById('btn').value=''
                }
            }
            function foo1() {
                if(document.getElementById('btn').value==''){
                    document.getElementById('btn').value='请输入与公司营业执照一致的公司名称';
                    document.getElementById('bi').style.display = 'block'
                }else {
                    document.getElementById('bi').style.display = 'none'
                }
            }
            document.getElementById('btn').onfocus=foo;
            document.getElementById('btn').onblur=foo1;



            function foo2() {
                if (document.getElementById('btn1').value=='请输入公司所在地址'){
                    document.getElementById('btn1').value=''
                }
            }
            function foo3() {
                if(document.getElementById('btn1').value==''){
                    document.getElementById('btn1').value='请输入公司所在地址';
                    document.getElementById('bi1').style.display = 'block'
                }else {
                    document.getElementById('bi1').style.display = 'none'
                }
            }
            document.getElementById('btn1').onfocus=foo2;
            document.getElementById('btn1').onblur=foo3;


            function foo4() {
                if (document.getElementById('btn2').value==''){

                }
            }
            function foo5() {
                if(document.getElementById('btn2').value==''){
                    document.getElementById('pi').style.display = 'none';
                    document.getElementById('bi2').style.display = 'block'
                }else{
                    document.getElementById('bi2').style.display = 'none';
                    if(document.getElementById('btn2').value.length>=2 && document.getElementById('pi').value.length<=6){
                        document.getElementById('pi').style.display = 'none';
                    }else {
                        document.getElementById('pi').style.display = 'block';
                    }
                }
                }
            document.getElementById('btn2').onfocus=foo4;
            document.getElementById('btn2').onblur=foo5;
        </script>
        <div class="box"><!--外面的大框-->
        <div class="top"><h1>企业会员申请<span>(资料提交成功后，客服人员将在一小时内与您联系。)</span></h1></div>
            <form>
                <table>
                    <tr>
                        <td class="foo">
                            <span>*</span>
                            企业名称
                        </td>
                        <td class="floor">
                        <input type="text" name="character" value="请输入与公司营业执照一致的公司名称" id="btn" onfocus="foo()" onblur="foo1()">
                        </td>
                        <td class="floor1">
                            <div id="bi" >
                            <p class="floor2"></p>
                            <p class="floor3">请输入企业名称全称</p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5">请输入与公司营业执照一致的公司名称</p>
                            </div>
                        </td>
                    </tr>



                    <tr>
                        <td class="foo">
                            <span>*</span>
                            所属行业
                        </td>
                        <td class="floor6">
                            <select>
                                <option selected="selected" class="floor7" value="请选择">请选择</option>
                                <option value="计算机">计算机</option>
                                <option value="贸易">贸易</option>
                                <option value="中介服务">中介服务</option>
                                <option value="房地产">房地产</option>
                            </select>
                        </td>
                        <td class="floor1">
                            <div>
                                <p class="floor2"></p>
                                <p class="floor3"></p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5"></p>
                            </div>
                        </td>
                    </tr>



                    <tr>
                        <td class="foo">
                            <span>*</span>
                            所在地区
                        </td>
                        <td class="floor9">
                            <select class="floor8">
                                <option selected="selected" class="floor7" value="安徽省">安徽省</option>
                                <option value="浙江省">浙江省</option>
                                <option value="山东省">山东省</option>
                                <option value="江西省">江西省</option>
                                <option value="江苏省">江苏省</option>
                            </select>
                            <select class="floor9">
                                <option selected="selected" class="floor7" value="合肥市">合肥市</option>
                                <option value="芜湖市">芜湖市</option>
                                <option value="马鞍山市">山东省</option>
                                <option value="六安市">江西省</option>
                                <option value="安庆市">安庆市</option>
                            </select>
                        </td>
                        <td class="floor1">
                            <div>
                                <p class="floor2"></p>
                                <p class="floor3"></p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5"></p>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td class="foo">
                            <span>*</span>
                            详细地址
                        </td>
                        <td class="floor">
                            <input type="text" name="character" value="请输入公司所在地址" id="btn1" onfocus="foo2()" onblur="foo3()">
                        </td>
                        <td class="floor1">
                            <div   id="bi1">
                                <p class="floor2"></p>
                                <p class="floor3">请输入公司所在地址</p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5"></p>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td class="foo">
                            <span>*</span>
                            联系人
                        </td>
                        <td class="main">
                            <input type="text" name="character" value="" class="main1" id="btn2" onfocus="foo4()" onblur="foo5()">
                            <input type="radio" name="sex" value="男"> 男
                            <input type="radio" name="sex" value="女" class="main2"> 女
                        </td>
                        <td class="floor1">
                            <div id="bi2">
                                <p class="floor2"></p>
                                <p class="floor3">请输入联系人的姓名</p>
                            </div>
                            <div id="pi">
                                <p class="floor2"></p>
                                <p class="floor5">姓名支持2-6中文字</p>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td class="foo">
                            <span>*</span>
                            联系电话
                        </td>
                        <td class="main3">
                            <input type="text" name="character" value="区号" class="main6">
                            <input type="text" name="character" value="电话号码" class="main4">
                            <input type="text" name="character" value="分机号" class="main5">
                        </td>
                        <td class="floor1">
                            <div>
                                <p class="floor2"></p>
                                <p class="floor3">号码格式不正确</p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5">联系方式至少填写一种</p>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td></td>
                        <td class="floor">
                            <input type="text" name="character" value="手机号码" >
                        </td>
                        <td class="floor1">
                            <div>
                                <p class="floor2"></p>
                                <p class="floor3"></p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5"></p>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td class="foo">
                            <span></span>
                            QQ号码
                        </td>
                        <td class="floor">
                            <input type="text" name="character" value="" >
                        </td>
                        <td class="floor1">
                            <div>
                                <p class="floor2"></p>
                                <p class="floor3">格式错误，请输入正确的qq号码</p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5"></p>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td class="foo">
                            <span>*</span>
                            招聘职位
                        </td>
                        <td class="main7">
                           <textarea maxlength="100">100字以内</textarea>
                        </td>
                        <td class="floor1">
                            <div>
                                <p class="floor2"></p>
                                <p class="floor3">请输入招聘职位</p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5"></p>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td class="foo">
                            <span></span>

                        </td>
                        <td class="foot">
                            <input type="checkbox" name="select" value="checkbox" class="foot2"><label class="foot3">我已阅读并同意新安人才网《<a href="http://ehr.goodjobs.cn/dispatcher.php/action/Announce">服务条款</a>  》</label>
                        </td>
                        <td class="floor1">
                            <div>
                                <p class="floor2"></p>
                                <p class="floor3">请选择！</p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5"></p>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td>
                            <span></span>

                        </td>
                        <td class="te">
                            <p class="ti"><a href="http://ehr.goodjobs.cn/dispatcher.php/action/BasicInfo">提交资料</a></p>
                        </td>
                        <td>
                            <div>
                                <p class="floor2"></p>
                                <p class="floor3"></p>
                            </div>
                            <div>
                                <p class="floor4"></p>
                                <p class="floor5"></p>
                            </div>
                        </td>
                    </tr>
                </table>
            </form>


        </div>
</body>
</html>
